<template>
  <div class="add_wrapper">
    <van-nav-bar
      title="我要维权"
      class="nav_bar"
      fixed
      left-arrow
      @click-left="onClickLeft"
    />
    <van-image
      class="pic"
      :src="require('@/assets/icon/home/weiquan_tips.png')"
    />
    <div class="form">
      <van-cell required>
        <template #title>
          <span class="cell_title">请大致描述一下您需要维权的事件</span>
        </template>
        <template #label>
          <van-field
            v-model="field.description"
            rows="3"
            autosize
            maxlength="200"
            show-word-limit
            type="textarea"
            placeholder="不超过200字..."
          />
        </template>
      </van-cell>
      <van-form>
        <van-field
          v-model="field.memberName"
          label="诉求者姓名"
          placeholder="请输入"
          required
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model="field.memberPhone"
          label="诉求者手机号"
          placeholder="请输入"
          required
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
          v-model="field.plateNumber"
          label="车牌号"
          placeholder="绑定信息后自动显示"
        />
        <van-field
          v-model="field.brand"
          label="车辆品牌"
          placeholder="绑定信息后自动显示"
        />
        <!-- <van-field label="是否新能源">
          <template #input>
            <van-radio-group v-model="field.isD" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field> -->
        <van-field name="uploader" label="图片上传(没有可以不传)">
          <template #input>
            <van-uploader
              v-model="fileList"
              max-count="9"
              :after-read="afterRead"
              :before-delete="beforeDel"
            />
          </template>
        </van-field>
        <div style="margin: 16px">
          <van-button round block type="info" @click="submit"
            >点击提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import api from "@/api/api";
import { mapGetters } from "vuex";
export default {
  components: {},
  props: {},
  data() {
    return {
      field: {
        description: "",
        memberName: "",
        memberPhone: "",
        plateNumber: "",
        brand: "",
        picList: [],
      },
      pics: [],
      fileList: [],
    };
  },
  watch: {},
  computed: {
    ...mapGetters(["carList", "currentCarIndex", "userData"]),
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    afterRead(files) {
      let piclist = Array.isArray(files) ? files : [files];
      piclist.forEach(async (item) => {
        item.status = "uploading";
        item.message = "上传中...";
        const data = new FormData();
        data.append("file", item.file);
        let res = await api.upload(data);
        this.field.picList.push(res);
        item.status = "down";
        item.message = "";
      });
    },
    beforeDel(file, detail) {
      this.field.picList.splice(detail.index, 1);
      this.fileList.splice(detail.index, 1);
    },
    async submit() {
      if (!this.field.description) {
        this.$toast("请输入维权内容");
        return;
      }
      await api.submitWeiquan({
        ...this.field,
        type: 1,
      });
      this.$toast("提交成功");
      setTimeout(() => {
        this.$router.back();
      }, 500);
    },
  },
  created() {},
  mounted() {
    this.carInfo = this.carList[this.currentCarIndex];
    this.field.brand = this.carInfo?.brand;
    this.field.plateNumber = this.carInfo?.plateNumber;
    this.field.memberName = this.userData.userName;
    this.field.memberPhone = this.userData.phone;
  },
};
</script>
<style lang="less" scoped>
.add_wrapper {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/44dea588672142d48f873df92c7b625e.jpg")
    no-repeat;
  background-size: contain;
  background-attachment: fixed;
  background-position: top;
  box-sizing: border-box;
  padding: 200px 50px 50px 50px;

  .pic {
    margin-top: 20px;
    width: 100%;
    height: 422px;
  }

  .form {
    background: #fff;
    margin-top: 100px;
    padding-bottom: 50px;
    /deep/ .van-cell {
      background: transparent;
      .van-field {
        background: #eee;
      }
    }
    .cell_title {
      font-size: 50px;
      color: #333;
    }
  }

  .nav_bar {
    /deep/ .van-icon {
      font-size: 50px;
      font-weight: bold;
      color: #333333;
    }
  }
}
</style>
